<template>
	<view>
		<uni-nav-bar :fixed="true" left-icon="back" color="#156DAC" @clickLeft="pageback">
			<view class="header-icon-text-panel">
				<text class="title">重选责任人</text>
			</view>
		</uni-nav-bar>
		<view>
			<uni-forms class="right-form left" :value="formData" ref="form" :rules="rules" errShowType="toast"  style="padding-top: 30upx;">
				<view class="form-content" >
					<!-- <uni-forms-item label="原责任人" name="oldResponsiblePersonName">
						<text class="form-ipt">{{formData.oldResponsiblePersonName}}</text>
					</uni-forms-item> -->
					<uni-forms-item required label="现责任人" name="responsiblePersonId">
						<lb-picker class="form-ipt" v-model="formData.responsiblePersonId" :list="userList" :props="userPickerProps" @confirm="(e)=>pickerSelectConfim('responsiblePerson',e,userPickerProps)">
							<view class="form-ipt">
								<text v-if="formData.responsiblePersonName" class="lb-picker-text">{{formData.responsiblePersonName}}</text>
								<text v-else class="placeholder">请选择责任人</text>
							</view>
						</lb-picker>
					</uni-forms-item>
				</view>
				<button class="form-btn" @click="submitForm">保存</button>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	const saveUrl = '/business/alarm/updateById'
	
	const getPersonUrl = '/system/user/getProjectPersonnel'
	
	import LbPicker from '@/components/lb-picker'
	import {getDict} from "@/common/dict.js"
	
	export default {
		components:{
			LbPicker
		},
		data() {
			return {
				userPickerProps: {label: 'realName',value: 'id'},
				formData:{
					id: null,
					responsiblePersonId: null,
					responsiblePersonName: '',
					currentAlarmPersonnelId: null
				},
				rules: {
					responsiblePersonId: {
						rules: [{ required: true, errorMessage: '请选择责任人'}]
					},
				},
				userList: [],
				type: '',
			}
		},
		onLoad(option) {
			this.formData.responsiblePersonId = option.responsiblePersonId || ''
			this.formData.currentAlarmPersonnelId = option.currentAlarmPersonnelId || ''
			this.formData.id = option.id
			this.initData()
		},
		methods: {
			pageback() {
				uni.navigateBack({
					delta: 1
				});
			},
			initData(){
				// 如果项目部已选择 查询项目部人员
				const query = {}
				this.$api.request(getPersonUrl,{
					method: 'get',
					data: query
				}).then(res=>{
					const row = res.data.row
					this.userList = row
					console.log(row)
				})
			},
			pickerSelectConfim(key,e, keyMap,type = null) {
				const {item} = e
				const value = item[keyMap['value']]
				const label = item[keyMap['label']]
				// const {equipmentId, name} = item
				this.formData[key+ 'Id'] = value
				this.formData[key+'Name'] = label	
			},
			submitForm(){
				this.$refs.form.submit().then((res)=>{
					// console.log('表单返回得值：', res)
					uni.showLoading({
						title:'保存中',
						mask: true
					})
					this.$api.request(saveUrl,{
						method: 'post',
						data: this.formData
					}).then(res=>{
						uni.hideLoading()
						if(res.success){
							this.$api.toastMsg('保存成功','success')
							setTimeout(()=>{
								uni.navigateBack()
							},1000);
						}
					}).catch(()=>{
						uni.hideLoading()
					})
				}).catch(err=>{
					console.log(err)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form-ipt{
		line-height: 72upx;
		.placeholder{
			color: grey;
		}
	}
</style>
